<template>
  <div class="chat-history">
    <h3 class="history-title">对话历史</h3>
    <div class="history-list">
        <!-- 显示空状态 -->
        <div v-if="processedChatHistories.length === 0" class="empty-history">
          <div class="empty-icon">
            <i class="fas fa-history text-gray-300 text-4xl"></i>
          </div>
          <p class="empty-text">暂无对话历史</p>
          <p class="empty-subtext">开始与角色对话后，这里将显示对话历史</p>
        </div>
        
        <!-- 显示历史记录 -->
        <div 
            v-for="history in processedChatHistories" 
            :key="history.id" 
            class="history-item transition-all hover:bg-gray-50 hover:translate-x-1" @click="loadHistory(history)"
          >
            <div class="role-avatar flex items-center justify-center" :style="{ backgroundColor: history.roleAvatarColor || '#9ca3af' }">
              <span :style="{ color: calculateTextColor(history.roleAvatarColor || '#9ca3af') }" class="font-medium text-sm">{{ history.roleName.charAt(0) }}</span>
            </div>
            <div class="history-info">
              <p class="role-name">{{ history.roleName }}</p>
              <p class="last-message">{{ history.lastMessage }}</p>
              <span class="timestamp">{{ formatTime(history.timestamp) }}</span>
            </div>
            <button class="delete-btn transition-all hover:bg-red-100 hover:text-red-600" @click.stop="deleteHistory(history.id)">
              <i class="fas fa-trash-alt"></i>
            </button>
          </div>
      </div>
  </div>
</template>

<script>
import { formatTime, generateColorFromText, calculateTextColor } from '../utils/index.js';
import { themeManager } from '../utils/index.js';

export default {
  name: "ChatHistory",
  props: {
    chatHistories: {
      type: Array,
      default: () => []
    }
  },
  
  mounted() {
    // 确保组件在挂载时应用当前主题
    this.currentTheme = themeManager.getCurrentTheme();
  },
  computed: {
    processedChatHistories() {
      // 确保所有历史记录都有头像颜色
      return this.chatHistories.map(history => ({
        ...history,
        roleAvatarColor: history.roleAvatarColor || generateColorFromText(history.roleName)
      }));
    }
  },
  methods: {
    loadHistory(history) {
      this.$emit('load-history', history);
    },
    deleteHistory(id) {
      this.$emit('delete-history', id);
    },
    formatTime(timestamp) {
      return formatTime(timestamp);
    }
  }
}
</script>

<style scoped>
.chat-history {
  padding: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

.history-title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #333;
}

.history-list {
      max-height: 300px;
      overflow-y: auto;
      position: relative;
    }
    
    .empty-history {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #9ca3af;
      text-align: center;
      padding: 2rem;
    }
    
    .empty-icon {
      margin-bottom: 1rem;
    }
    
    .empty-text {
      font-size: 1.1rem;
      font-weight: 500;
      margin-bottom: 0.5rem;
      color: var(--theme-textPrimary);
    }
    
    .empty-subtext {
      font-size: 0.9rem;
      color: var(--theme-textSecondary);
    }

.history-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
  background-color: var(--theme-surface);
}

.history-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
}

.role-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 0.75rem;
    }

.history-info {
  flex: 1;
  min-width: 0;
}

.role-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--theme-textPrimary);
}

.last-message {
  font-size: 0.875rem;
  color: var(--theme-textSecondary);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timestamp {
  font-size: 0.75rem;
  color: var(--theme-textSecondary);
  opacity: 0.8;
}

.delete-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.delete-btn:hover {
  background-color: var(--theme-error);
  color: white;
  opacity: 1;
  transform: scale(1.1);
}
</style>